<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-19 10:10:33
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-07 17:06:30
 * @FilePath: \cxl-h5\src\pages\personalCenter\invoice\index\Index.vue
-->
<template>
    <section class="invoice-container">
        <!-- 头部 -->
        <section class="header">
            <section class="record" @click="data.openHistory">
                <img src="../../../../assets/images/record.svg" alt="" srcset="" />
                开票记录
            </section>
        </section>
        <!-- 中间内容 -->
        <section class="content">
            <section class="box" v-if="data.contentVisible">
                <section class="block">
                    <van-pull-refresh v-model="data.refreshLoading" @refresh="data.onRefresh" class="list-main">
                        <van-list
                            v-model:loading="data.dataLoading"
                            :finished="data.dataFinished"
                            :finished-text="data.list.length ? '' : ''"
                            @load="data.onLoad"
                            loading-text=" "
                        >
                            <section class="list">
                                <section
                                    class="li"
                                    v-for="(item, index) in data.list"
                                    :key="item"
                                    @click="data.onSelectOrder(index)"
                                >
                                    <section class="select-input">
                                        <span class="iconfont icon-chenggong" v-if="item.select"></span>
                                        <span class="iconfont icon-weixuanzhong" v-else></span>
                                    </section>
                                    <section class="info">
                                        <section class="order-info">
                                            <h1 v-if="item.packageNameNumber">
                                                {{ productTypeMap.get(item.productType + '') }}车况 -
                                                {{ packageNameMap.get(item.packageNameNumber + '') }}
                                            </h1>
                                            <h1 v-else>
                                                <template v-if="item.modelDetail">{{ item.modelDetail }}</template>
                                                <template v-else>{{ item.brand }}</template>
                                            </h1>
                                            <p>订单号：{{ item.orderNo }}</p>
                                            <span>支付时间：{{ item.payTime }}</span>
                                        </section>
                                        <section class="price"><i>￥</i>{{ item.amount }}</section>
                                    </section>
                                </section>
                            </section>
                        </van-list>
                    </van-pull-refresh>
                </section>
            </section>
            <!-- 无记录 -->
            <section class="none" v-else>
                <NoOrder describe="没有可开票订单" button-text="返回" @touch="data.onOpenDetection"></NoOrder>
            </section>
        </section>
        <!-- 底部 -->
        <section class="footer" v-if="data.contentVisible">
            <section class="footer-box">
                <section :class="['all', data.isSelectAll ? 'active' : '']" @click="data.selectALL">
                    <span class="iconfont icon-chenggong" v-if="data.isSelectAll"></span>
                    <span class="iconfont icon-weixuanzhong" v-else></span>
                    全选
                </section>
                <section class="result">
                    <section class="info">
                        <section class="count">
                            共计 <span><i>￥</i>{{ data.selectOrderPrice }}</span>
                        </section>
                        <section class="num">已选{{ data.selectOrderTotal }}个订单</section>
                    </section>
                    <section
                        :class="[
                            'btn',
                            data.selectList.length && Number(data.selectOrderPrice) >= data.minMoney ? 'active' : ''
                        ]"
                        @click="data.onConfirm"
                    >
                        下一步
                    </section>
                </section>
            </section>
        </section>
        <!-- 确认弹窗 -->
        <confirmPopupVue
            v-model="data.confirmPopup.visible"
            :title="data.confirmPopup.title"
            :content="data.confirmPopup.content"
            :cancelBtn="false"
            @confirm="
                () => {
                    data.confirmPopup.visible = false
                }
            "
        ></confirmPopupVue>
    </section>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import NoOrder from '@/components/NoOrder.vue'
import Invoice from '.'
import confirmPopupVue from '@/components/confirmPopup/Index.vue'
import { packageNameMap, productTypeMap } from '@/utils/config'

//初始化数据
const data = reactive(new Invoice())
</script>

<style scoped lang="scss">
.invoice-container {
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--cxl-color-f2f6f8);
    .header {
        box-sizing: border-box;
        padding: var(--cxl-size-14) var(--cxl-size-16) 0 var(--cxl-size-16);
        height: var(--cxl-size-30);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        img {
            display: block;
            width: var(--cxl-size-16);
            height: var(--cxl-size-16);
            margin-right: var(--cxl-size-6);
        }
        section {
            font-size: var(--cxl-size-15);
            color: var(--cxl-color-333333);
            display: flex;
            align-items: center;
        }
    }
    .content {
        height: calc(100% - var(--cxl-size-30) - var(--cxl-size-45) - var(--cxl-size-45));

        box-sizing: border-box;
        padding: var(--cxl-size-16);
        .box {
            height: 100%;
            background-color: var(--cxl-color-white);
            border-radius: var(--cxl-size-6);

            box-sizing: border-box;
            padding: var(--cxl-size-16) 0;
            .block {
                height: 100%;
            }
            .list-main {
                height: 100%;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                box-sizing: border-box;
                padding: 0 var(--cxl-size-16);
            }

            .li {
                display: flex;
                align-items: center;
                justify-content: space-between;
                &:not(:last-child) {
                    border-bottom: 1px solid var(--cxl-color-f0f0f0);
                    padding-bottom: var(--cxl-size-16);
                    margin-bottom: var(--cxl-size-16);
                }

                .select-input {
                    width: var(--cxl-size-18);
                    span {
                        font-size: var(--cxl-size-18);
                        color: var(--cxl-color-primary);
                    }
                }
                .info {
                    width: calc(100% - var(--cxl-size-18) - var(--cxl-size-10));
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                    .order-info {
                        width: calc(100% - 7rem);

                        h1 {
                            font-size: var(--cxl-size-15);
                            font-weight: 600;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        p {
                            font-size: var(--cxl-size-12);
                            margin-top: var(--cxl-size-6);
                        }
                        span {
                            font-size: var(--cxl-size-12);
                            margin-top: var(--cxl-size-6);
                            display: block;
                            color: var(--cxl-color-999999);
                        }
                    }
                    .price {
                        width: 7rem;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        font-size: var(--cxl-size-18);
                        color: var(--cxl-color-primary);
                        i {
                            font-size: var(--cxl-size-14);
                        }
                    }
                }
            }
        }
    }
    .footer {
        background-color: var(--cxl-color-white);
        padding-bottom: env(safe-area-inset-bottom);
        .footer-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--cxl-size-15) var(--cxl-size-15) var(--cxl-size-30) var(--cxl-size-15);
            margin: 0;
            .all {
                display: flex;
                align-items: center;
                color: var(--cxl-color-999999);
                font-size: var(--cxl-size-14);
                &.active {
                    span {
                        color: var(--cxl-color-primary);
                    }
                }
                span {
                    font-size: var(--cxl-size-18);
                    margin-right: var(--cxl-size-6);
                }
            }
            .result {
                display: flex;
                align-items: center;

                .btn {
                    width: 12rem;
                    height: var(--cxl-size-40);
                    background-color: var(--cxl-color-primary-light-7);
                    color: var(--cxl-color-white);
                    font-size: var(--cxl-size-12);
                    text-align: center;
                    line-height: var(--cxl-size-40);
                    border-radius: var(--cxl-size-20);
                    transition: all 0.35s;
                    &.active {
                        background-color: var(--cxl-color-primary);
                    }
                }

                .info {
                    margin-right: var(--cxl-size-10);
                    .count {
                        font-size: var(--cxl-size-12);
                        span {
                            font-size: var(--cxl-size-24);
                            color: var(--cxl-color-f57221);
                            i {
                                font-size: var(--cxl-size-15);
                            }
                        }
                    }
                    .num {
                        font-size: var(--cxl-size-12);
                    }
                }
            }
        }
    }
}
</style>
